React Tips — Rendering Lists, Dynamic Components, and Default Props

React is the most used front end library for building modern, interactive front end web apps. It can also be used to build mobile apps.

In this article, we’ll look at how to render lists in React components, rendering components dynamically, and setting default props.

Rendering Lists

We can render lists by mapping our data to the component that we use to render the list item.

To do the mapping, we use the array’s map instance method. We can do that as follows:

import React from "react";

const persons = [
  { firstName: "Jane", lastName: "Smith" },
  { firstName: "Alex", lastName: "Jones" },
  { firstName: "May", lastName: "Wong" }
];

const Person = ({ firstName, lastName }) => (
  <div>
    {firstName} {lastName}
  </div>
);

export default function App() {
  return (
    <div>
      {persons.map((p, i) => (
        <Person {...p} key={i} />
      ))}
    </div>
  );
}

In the code above, we have the Persons array, which we call map on in App . In the map method, we pass in a callback to return the Person component with all the properties of each persons entry passed in as props.

We need the key prop so that React can identify them properly. Ideally, it’s a unique ID, but the array index can also be the value of the key prop.

Then in Person , we have the props in the parameters and we decompose the prop properties in variables with the destructuring syntax.

Therefore <Person {...p} /> is the same as:

<Person firstName={p.firstName} lastName={p.lastName} key={i} />

It’s a lot shorter if our prop name is the same as our object’s property names.

In the end, we see:

Jane Smith
Alex Jones
May Wong

displayed on the screen.

Dynamic Component Names

React components can have dynamic components. As long as the variable name starts with an upper case, it can be used as a dynamic component. We can render components with dynamic component names as follows:

import React from "react";

const Foo = ({ text }) => <p>{text} foo</p>;
const Bar = ({ text }) => <p>{text} bar</p>;

const components = {
  foo: Foo,
  bar: Bar
};

export default function App() {
  const [name, setName] = React.useState("foo");
  const toggle = () => {
    setName(name => (name === "foo" ? "bar" : "foo"));
  };

  const Component = components[name];
  return (
    <>
      <div>
        <button onClick={toggle}>Toggle</button>
        <Component text="hello" />
      </div>
    </>
  );
}

In the code above, we have the name state, which is set by the setName function. The toggle function calls setName to change the name.

Outside the toggle function in App , we set the Component variable by using:

const Component = components[name];

Then we return the Component to render it. We can pass props to it like any other static component.

Therefore, when we click the toggle button, we should see ‘hello foo’ and ‘hello bar’ displayed as the button is clicked.

Default Props

We can add default props to make sure we always have some values set for our props.

To set default props, we use the defaultProps property to set the default values of each prop;

For instance, we can write the following code to set default props for the Person component that we have above:

import React from "react";
const persons = [
  { firstName: "Jane", lastName: "Smith" },
  { firstName: "Alex", lastName: "Jones" },
  { firstName: "May", lastName: "Wong" },
  {}
];
const Person = ({ firstName, lastName }) => (
  <div>
    {firstName} {lastName}
  </div>
);
Person.defaultProps = {
  firstName: "No",
  lastName: "Name"
};

export default function App() {
  return (
    <div>
      {persons.map((p, i) => (
        <Person {...p} key={i} />
      ))}
    </div>
  );
}

In the code above, we added:

Person.defaultProps = {
  firstName: "No",
  lastName: "Name"
};

to set the default values of the firstName and lastName props.

Then we’ll get the following displayed on the screen:

Jane Smith
Alex Jones
May Wong
No Name

Since we have an empty object in the persons array as the last entry. Therefore, the default values are rendered in place of whatever is passed in.

Conclusion

We can render lists by mapping arrays to components with a map method. In case props aren’t passed into a component, we can set the defaultProps property to set the default values of one or more props.

Finally, we can render components dynamically can map the components by their name string in an object.